<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哈基天气 - 专业天气预报</title>
  <link href="https://cdn.jsdelivr.net/npm/qweather-icons@1.8.0/font/qweather-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <!-- 左侧：天气信息栏 -->
    <div class="sidebar">
      <!-- 导航栏 -->
      <div class="navbar">
        <div class="logo-container">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="white"/>
          </svg>
          <a href="#" class="logo">哈基天气</a>
        </div>
        <div class="search-container">
          <input type="text" id="city-search" placeholder="🔍搜索城市" class="search-input">
          <div class="search-results" id="search-results"></div>
        </div>
      </div>
      
      <!-- 天气内容区域 -->
      <div class="weather-content">
        <!-- 当前天气 - 添加点击事件 -->
        <div class="current-weather clickable" id="current-weather-clickable">
          <div class="location" id="current-location">正在获取位置...</div>
          <div class="info-row">
            <div class="weather-icon" id="current-weather-icon">⏳</div>
            <div>
              <div class="temp" id="current-temp">--°</div>
              <div class="desc" id="current-desc">加载中...</div>
            </div>
          </div>
          <div class="detail" id="current-detail">正在获取天气数据...</div>
          <div class="wind-humidity">
            <div id="current-wind">-- 级风</div>
            <div id="current-humidity">--% 相对湿度</div>
          </div>
        </div>

        <!-- 未来几日预报 -->
        <div class="forecast">
          <h3>未来几日预报</h3>
          <div id="forecast-container">
            <div class="forecast-item">
              <div class="date">加载中...</div>
              <div class="weather">⏳</div>
              <div class="temp-range">--° ~ --°</div>
            </div>
          </div>
        </div>

        <!-- 未来30天预报 -->
        <div class="future-30d">
          <h3>未来30天预报</h3>
          <p id="future-30d-text">正在获取长期预报数据...</p>
        </div>
      </div>
    </div>
      <!-- 右侧：气象图轮播区域 -->
      <div class="main-content">
        <div class="weather-carousel" id="weather-carousel">
          <div class="carousel-container" id="carousel-container">
            <!-- 轮播图片将通过JS动态生成 -->
          </div>
          <div class="carousel-controls">
            <button class="carousel-btn prev-btn" id="prev-btn">
              <i class="qi-chevron-left"></i>
            </button>
            <div class="carousel-dots" id="carousel-dots">
              <!-- 指示点将通过JS动态生成 -->
            </div>
            <button class="carousel-btn next-btn" id="next-btn">
              <i class="qi-chevron-right"></i>
            </button>
          </div>
          <div class="weather-info-overlay">
            <div class="overlay-content">
              <div id="carousel-weather-desc">晴</div>
              <div id="carousel-time-desc">白天</div>
            </div>
          </div>
        </div>
        <div class="loading" id="loading">加载气象数据中...</div>
        <div class="debug-info" id="debug-info"></div>
      </div>
  </div>

  <!-- 天气详情页 - 新增 -->
  <div class="weather-detail-page" id="weather-detail-page">
    <div class="detail-header">
      <button class="back-button" id="back-button">
        <i class="qi-chevron-left"></i>
        返回
      </button>
      <div class="detail-location" id="detail-location">北京市</div>
    </div>
    
    <div class="detail-content">
      <!-- 当前天气概况 -->
      <div class="detail-current">
        <div class="detail-temp" id="detail-temp">25°</div>
        <div class="detail-weather" id="detail-weather">晴</div>
        <div class="detail-temp-range" id="detail-temp-range">最高 28° 最低 18°</div>
      </div>

      <!-- 逐小时预报 -->
      <div class="hourly-forecast">
        <h3>24小时预报</h3>
        <div class="hourly-container" id="hourly-container">
          <!-- 逐小时数据将通过JS动态生成 -->
        </div>
      </div>

      <!-- 天气详情网格 -->
      <div class="weather-details-grid">
        <h3>天气详情</h3>
        <div class="details-grid" id="details-grid">
          <!-- 详情数据将通过JS动态生成 -->
        </div>
      </div>

      <!-- 生活指数 -->
      <div class="living-index">
        <h3>生活指数</h3>
        <div class="index-container" id="index-container">
          <!-- 生活指数数据将通过JS动态生成 -->
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>